<!-- 地区详情 -->
<template>
	<view class="city">
		<comHeader :config="navConfig"/>
		<view class="banner">
			<!-- <view class="back" @click="back()">
				<image src="/static/fanhui.png" mode=""></image>
			</view> -->
			
			<view class="p-num" @click="play">
				<image src="/static/tupian.png" mode="aspectFit"></image>
				<text>10</text>
			</view>
			<view class="p-num" style="top: 208upx;">
				<image class="VR-img" src="/static/360VR.png" mode="aspectFit"></image>
			</view>
			<image class="banner-mask" src="/static/wave.png" mode=""></image>
			<view class="dot-main">
				<view :class="['dot-item',current==index?'active':'']" v-for="(item,index) in bannerData" :key="index"></view>
			</view>
			<swiper class="swiper" :indicator-dots="false" autoplay="true"  circular='true' :interval="3000" :duration="500" @change="change">
			    <swiper-item v-for="(item,index) in bannerData" :key="index">
			        <view class="swiper-item"  >
						<image :src="item.img" alt=""></image>
			        </view>
			    </swiper-item>
			</swiper>
		</view>
		<view class="city-title">
			<image src="../../static/cityball-l.png" mode=""></image>
			<text>沈阳</text>
			<image src="../../static/cityball-r.png" mode=""></image>
		</view>
		
		<view class="city-tip" >
			<text class="city-tip-top">沈阳—东北地区重要中心城市，<br>素有“一朝发祥地、两代帝王城”之称</text>
			<view class="line"></view>
			<view class="city-info-btn">
				<image v-if="!isFenxiang" src="/static/fenxiang.png" @click="togglePopup('bottom','share')" mode=""></image>
				<image v-if="isFenxiang" src="/static/fenxiang-1.png" @click="togglePopup('bottom','share')" mode=""></image>
				<image v-if="!isShoucang" @click="coll()" src="/static/shoucang.png" mode=""></image>
				<image v-if="isShoucang" src="/static/shoucang-1.png" mode=""></image>
				
			</view>
			<view class="list-title">
				<text class='shu'></text>
				<text>语音导览</text>
				<image class="play" src="/static/map/play.png" mode="" @click="toAudio"></image>
				<view class="en" :class="lanIndex==1?'lan-ac':''" @click="chooseLan(1)">English</view>
				<view class="zh " :class="lanIndex==0?'lan-ac':''"  @click="chooseLan(0)">普通话</view>
			</view>
			
			<view class="list-title" style="margin-top: 20upx;">
				<text class='shu'></text>
				<text>景区简介</text>
				
			</view>
			<!-- <rich-text :nodes="cityText" class="rich"></rich-text> -->
			
			<view v-html="cityText" class="rich"></view>
			<view class="wz-zan">
				<text>26</text>
				<image src="/static/zan-blue.png" mode=""></image>
			</view>
		</view>
		
		<view class="pl">
			<!-- <view class="list-title">
				<text class='shu'></text>
				<text>评论（123）</text>
				<view class="list-title-more" @click="morePl">
					<text>查看全部</text>
					<uni-icon type="arrowleft" style='transform: rotate(180deg);' size="20" color="rgba(85,160,255,1.00)"></uni-icon>
				</view>
			</view> -->
			<Comment :isShowPlBox="true" :isShowAllHead="false"></Comment>
		
	</view>
		<!-- <view class="bottom">
			<input placeholder="留下你精彩的评论吧" placeholder-style="color:rgba(204,204,204,1.00)" type="text">
			<view class="bottom-btn">
				<image class="bottom-btn-1-image" v-if="false" src="/static/zan.png" mode=""></image>
				<image class="bottom-btn-1-image" src="/static/zan.png" mode=""></image>
			</view>
			<view  class="bottom-btn" @click="togglePopup('bottom','share')">
				<image class="bottom-btn-2-image" v-if="false" src="/static/fenxiang-red.png" mode=""></image>
				<image class="bottom-btn-2-image" src="/static/fenxiang.png" mode=""></image>
			</view>
		</view> -->
		<Collection v-if='showColl' />
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
		<top-view></top-view>
		<audioPlayer ref='audio1' v-if='showAudio' />
	</view>
</template>

<script>
	import audioPlayer from '@/components/audioPlayer.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import Comment from '@/components/Comment.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false,
					comScroll:0,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:''
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				current: 0,
				lanIndex:0,
				isFenxiang:false,
				showColl:false,
				showAudio:false,
				isShoucang:false,
				cityText:"<p><span>沈</span>阳，简称“沈”，别称盛京、奉天，是辽宁省省会。</p><br><p>1、副省级市、特大城市、沈阳都市圈核心城市，国务院批复确定的中国东北地区重要的中心城市、先进装备制造业基地和国家历史文化名城，全市下辖10区、2县，代管1县级市，面积1.29万平方公里，常住人口829.4万人。</p><br><img width='100%' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572666997572&di=b170971c0440cc21862a096efd2c5a4f&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F7593fe93c138813898d030c1cf691f10e8e28aed.jpg'/> <p>2、沈阳位于中国东北南部、辽宁中部，是中国北部战区司令部驻地。沈阳联勤保障中心驻所，地处东北亚经济圈和环渤海经济圈的中心，是长三角、珠三角、京津冀地区通往关东地区的综合枢纽城市。</p>",
				bannerData:[
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
				],
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
				type: '',//uniPopup组件类型
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			back(){
				this.$refs.audio1.close()
				uni.navigateBack({
					delta:1
				})
			},
			coll(){
				this.showColl=true
				document.body.style.overflow = 'hidden'
			},
			closeColl(){
				this.showColl=false
				document.body.style.overflow = 'scroll'
			},
			toAudio(){
				// this.$store.commit('showAudioPlayerUpdate',{show:true})
				this.showAudio=true
			},
			closeAudio(){
				// this.$store.commit('showAudioPlayerUpdate',{show:true})
				this.showAudio=false
			},
			morePl(){
				uni.navigateTo({
					url:'/pages/common/evaluation?tip=false',
				})
			},
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
			},
			chooseLan(index){
				this.lanIndex = index
			},
			cancel(type) {
				this.$refs[type].close()
			},
			toPl(){
				uni.navigateTo({
					url:'/pages/common/evaluation'
				})
			},
			play(){
				uni.navigateTo({
					url:'/pages/home/cityPhoto'
				})
			}
		},
		components: {
			uniIcon,
			Comment,
			uniPopup,
			audioPlayer
		},
	}
</script>

<style scoped>
	.city{
		width: 750upx;
		height: auto;
	}
	.banner{
		width: 750upx;
		position: relative;
		height: 436upx;
	}
	.back{
		width: 50upx;
		height: 50upx;
		position: absolute;
		left: 28upx;
		top:60upx;
		z-index: 20;
	}
	.back image{
		width: 30upx;
		height: 36upx;
		
	}
	.wz-zan{
		width: 100%;
		height: 80upx;
	}
	.wz-zan image{
		width: 36upx;
		height: 34upx;
		margin-top: 23upx;
		margin-right: 30upx;
		float: right;
	}
	.wz-zan text{
		font-size: 26upx;
		margin-right: 50upx;
		float: right;
		line-height: 80upx;
		color: rgba(153,153,153,1.00);
	}
	.spot-title{
		width: 750upx;
		height:  80upx;
		/* float: right; */
	}
	.spot-title-text{
		font-size: 34upx;
		margin-left: 28upx;
		float: left;
	}
	.zh,.en{
		width: 141upx;
		height: 44upx;
		border: #999999 solid 1upx;
		border-radius: 20upx;
		color: #999999;
		text-align: center;
		line-height: 44upx;
		font-size: 28upx;
		float: right;
		margin-top: 6upx;
		margin-left: 26upx;
	}
	.lan-ac{
		border: #54B1FF solid 1upx;
		color: #54B1FF;
		
	}
	.play{
		width: 58upx;
		height: 58upx;
		float: right;
		margin-right: 31upx;
		margin-left: 26upx;
	}
	.p-num{
		width: 125upx;
		height: 58upx;
		top: 103upx;
		right: 0;
		position: absolute;
		z-index: 20;
		background: rgba(0,0,0,0.5);
		border-radius: 30upx 0 0 30upx;
		position: absolute;
	}
	.p-num image{
		width: 26upx;
		height: 26upx;
		margin-left:36upx;
		margin-top: 17upx;
		float: left;
		
	}
	.VR-img{
		width: 92upx !important;
		height: 32upx !important;
		margin-left:20upx !important;
		margin-top: 13upx !important;
	}
	.p-num text{
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 58upx;
		float: left;
		margin-left: 16upx;
	}
	.banner-mask{
		position: absolute;
		bottom: 0;
		width: 750upx;
		height: 40upx;
		z-index: 20;
	}
	.city-info-btn{
		width: 700upx;
		height: 37upx;
		padding-top: 80upx;
		margin-left: 25upx;
	}
	.city-info-btn image{
		width: 35upx;
		height: 35upx;
		margin-right: 30upx;
		float: left;
	}
	.swiper{
		width: 750upx;
		height: 436upx;
	}
	.swiper-item image{
		width: 750upx;
		height: 436upx;
		
	}
	.dot-main {
		width: 300upx;
		right: 0;
		height: 8upx;
		display: flex;
		margin-top: 400upx;
		position: absolute;
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 10upx;
		height: 10upx;
		border-radius: 25px;
		background: rgba(0,0,0,0.3);
		margin: 0 5upx;
		box-sizing: border-box;
	}
	.active {
		background: #ffffff;
	}
	.city-title{
		width: 750upx;
		height: 60upx;
		display: flex;
		flex-direction: row;
		margin-top: 40upx;
		justify-content: center;
	}
	.city-title text{
		color: #4498FF;
		font-size: 40upx;
		font-family:STKaiti;
		margin: 0 60upx;
	}
	.city-title image{
		width: 58upx;
		margin-top: 14upx;
		height: 32upx;
	}
	.city-tip{
		width: 750upx;
		height: auto;
		margin: 46upx 0upx 0upx 0upx;
	}
	.city-tip-top{
		width: 416upx;
		margin: 0 167upx;
		text-align: center;
		font-size: 28upx;
		display: block;
		line-height: 50upx;
	}
	.rich{
		width: 648upx !important;
		margin: 40upx 51upx ;
	}
	.rich>>>p{
		width: 100%;
		font-size: 26upx;
		text-indent: 48upx;
		/* margin: 0 51upx ; */
		
	}
	.rich>>>p:first-child{
		width: 648upx;
		text-indent: 0upx;
		
	}
	.rich>>>span{
		font-size: 40upx !important;
	}
	.rich p{
		width: 100%;
		font-size: 26upx;
		text-indent: 48upx;
		/* margin: 0 51upx ; */
		
	}
	.rich p:first-child{
		width: 648upx;
		text-indent: 0upx;
		
	}
	.rich span{
		font-size: 40upx !important;
	}
	/* .rich>>>img{
		width: 680upx;
		height: auto;
		margin: 30upx 35upx;
	}
	.rich img{
		width: 680upx;
		height: auto;
		margin: 30upx 35upx;
	} */
	.line{
		width: 750upx;
		height: 2upx;
		margin-top: 42upx;
		background-image: linear-gradient(to right, #ffffff , rgba(129,210,251,1.00),#ffffff);
	}
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58upx;
		margin-top:40upx;
	}
	.list-title text{
		font-size: 30upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.audio-btn{
		width: 144upx;
		height: 45upx;
		color: #FFFFFF;
		font-size: 24upx;
		text-align: center;
		padding-left: 0;
		margin-top: 5upx;
		padding-right: 0;
		margin-right: 20upx;
		line-height: 45upx;
		border-radius: 30upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.list-title-more{
		width: 200upx;
		display: flex;
		flex-direction: row;
		float: right;
		justify-content: flex-end;
	}
	.list-title-more text{
		font-size: 24upx;
		padding-top: 4upx;
		/* line-height: 58upx !important; */
		color: rgba(85,160,255,1.00);
	}
	.pl{
		width: 750upx;
		height: auto;
		margin-bottom: 130upx;
		border-top: rgba(246,246,246,1.00) solid 15upx;
	}
	.bottom{
		width: 750upx;
		height: 110upx;
		background: rgba(255,255,255,1);
		box-shadow: -0.698px -9.976px 19px 0px rgba(173,173,174,0.24);
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.bottom-btn{
		width: 100upx;
		height: 70upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.bottom input{
		width: 380upx;
		margin-left: 20upx;
		border-radius: 10upx;
		height: 20upx;
		padding: 10upx 30upx;
		font-size: 26upx;
		border: rgba(0,0,0,0.1) solid 1upx;
		margin-top: 18upx;
	}
	.bottom-btn-1-image{
		width: 48upx;
		height: 42upx;
		margin-top: 31upx;
		margin-right: 10upx;
		margin-left: 20upx;
	}
	.bottom-btn-2-image{
		width: 38upx;
		height: 40upx;
		margin-top: 32upx;
		margin-right: 20upx;
	}
	.bottom-btn text{
		font-size: 24upx;
		color: rgba(153,153,153,1.00);
		line-height: 104upx;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		font-size: 30upx;
		color: #666;
	}
</style>
